<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
		.container{
			margin:50px auto;
			position: relative;
			width:1200px;
			height:460px;
		}
			div.img{
				width:1200px;
				height:460px;
				position: absolute;
			}
			.img1{
				background:url("http://img.mukewang.com/582ae12700017a8612000460.jpg") no-repeat;
			}
			.img2{
				background:url("http://img.mukewang.com/5844d022000184a012000460.jpg") no-repeat;
				display:none ;
			}
			.img3{
				background:url("http://img.mukewang.com/5824332800012c2712000460.jpg") no-repeat;
				display:none ;
			}
			.img4{
				background:url("http://img.mukewang.com/582ae3c80001242c12000460.jpg") no-repeat;
				display:none ;
			}
			span{
				font-size:20px;
				display: block;
				color: #fff;
				position:absolute;
				z-index: 1000;
				right:0;
				top:40%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<span>向右切换</span>
			<div class="img img1">1</div>
			<div class="img img2">2</div>
			<div class="img img3">3</div>
			<div class="img img4">4</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var i=1;
				var timer=play();
				$('span').click(function(){
					clearInterval(timer);
					if(i == 3) i=0;
					$(".img").fadeOut('1000');
					$(".img").eq(i).fadeIn('1000');
					i++;
				})
				$('span').mouseleave(function(){
					timer=play();
				})
				function play(){
					var timer=setInterval(function(){
					console.log(i);
					if(i == 3) i=0;
					$(".img").fadeOut('1000');
					$(".img").eq(i).fadeIn('1000');
					i++;
					},4000)
					return timer;
				}
			})
		</script>
	</body>
</html>
